<template>
<div id="login">
  <el-form :model="ruleForm2" status-icon  :rules="rules2" ref="ruleForm2" label-width="60px" class="login">
  <el-form-item label="用户名" prop="name">
    <el-input v-model="ruleForm2.name" placeholder="请输入用户名"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="pass">
    <el-input type="password" v-model="ruleForm2.pass" auto-complete="off" placeholder="请输入密码"></el-input>
  </el-form-item>
   <el-form-item label="科室" prop="dep" class="dep">
        <el-select v-model="ruleForm2.dep" placeholder="请选择">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        <el-button icon="el-icon-more"></el-button>

  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm2')">登录</el-button>
    <el-button @click="resetForm('ruleForm2')">重置</el-button>
  </el-form-item>
</el-form>
    
</div>
 
</template>

<script>
  
 export default {
    data() {
      var checkName = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('账号不能为空'));
        }
        else {
              callback();
            }
       
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
           
          callback();
        }
      };
      
      return {
        options: [{
            value: '选项1',
            label: '黄金糕'
            }, {
            value: '选项2',
            label: '双皮奶'
            }, {
            value: '选项3',
            label: '蚵仔煎'
            }, {
            value: '选项4',
            label: '龙须面'
            }, {
            value: '选项5',
            label: '北京烤鸭'
            }, {
            value: '选项6',
            label: '蚵仔煎'
            }, {
            value: '选项7',
            label: '龙须面'
            }, {
            value: '选项8',
            label: '北京烤鸭'
        }],
        redirect:'',    
        ruleForm2: {
            name: '',
            pass: '',
            dep:'北京烤鸭'
        },
        rules2: {
            name: [
                { validator: checkName, trigger: 'blur' }
            ],
            pass: [
                { validator: validatePass, trigger: 'blur' }
            ],
           
        }
      };
    },
    created(){
        this.redirect = this.$route.query.redirect
        
    },
    methods: {
        
      submitForm(formName) {
       var _this = this;
        this.$refs[formName].validate((valid) => {
           
          if (valid) {
            let parms = {
              "loginAccount":this.ruleForm2.name,
              "loginPassword":this.ruleForm2.pass,
            }
            this.$api.login(parms).then(function(res){
              
                _this.$store.commit('TOKEN',res.Data)  //存储token
                if(_this.redirect){
                    _this.$router.push({path:_this.redirect })
                }
            })
           // alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style>
#login{
    height: 100%;
    background-color: #f6f6f6
}
.login{
    width: 400px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
    font-weight: bold;
    box-shadow: 0px 0px 5px #ccc;
}
.login:hover{
   box-shadow: 0px 0px 5px #947777;
}
.dep{
    text-align: left;
}
.dep .el-select{
    width: 280px;
}
</style>
